<template>
	<view class="content">
		<view
			style="position: fixed;top: 0;width: 100%;display: flex;align-items: center;z-index: 99;flex-direction: column;">
			<view style="height: 20rpx;"></view>
			<view style="width: 100%;display: flex;justify-content: center;;white-space: nowrap;">
				<view
					style="width: 90%;display: flex;margin-top: 60rpx;justify-content: space-between;align-items: center;overflow: hidden;">
					<view style="width: 150rpx;">
						<uni-icons @click="back" size="25" type="back" style="color: #fff;"></uni-icons>
					</view>
					<view
						style="font-size: 32rpx;flex: 1;text-align: center;overflow: hidden;color: #fff;margin-left: rpx;">
						Vip
					</view>
					<view style="width: 150rpx;color: #fff;font-size: 25rpx;text-align: right;">
						{{$t('user.42')}}
					</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
		<view style="height: 180rpx;"></view>
		<view style="width: 90%;display: flex;justify-content: space-between;align-items: center;">
			<view style="display: flex;align-items: center;">
				<image v-if="false" style="width: 100rpx;height: 100rpx;margin-right: 20rpx;border-radius: 50%;"
					mode="aspectFill"></image>
				<image v-else style="width: 100rpx;height: 100rpx;margin-right: 20rpx;border-radius: 50%;" :src="txUrl">
				</image>
				<view style="display: flex;flex-direction: column;width: 220rpx;color: #FEE1BC;white-space: nowrap;">
					<view style="font-size: 30rpx;white-space: nowrap;">小明</view>
					<view style="height: 10rpx;"></view>
					<view v-if="true" style="font-size: 25rpx;">{{$t('vip.67')}}：2025-12-12</view>
					<view v-else style="font-size: 25rpx;color: #fff;">{{$t('common.122')}}</view>
				</view>
			</view>
			<image src="../../static/images/vip7.png" style="width: 220rpx;height: 200rpx;" mode="heightFix"></image>
		</view>

		<view
			style="width: 100%;flex: 1; background-color: #292929;border-top-right-radius: 80rpx;border-top-left-radius: 80rpx;display: flex;flex-direction: column;align-items: center;">
			<view style="height: 40rpx;"></view>
			<view style="width: 90%;display: flex;overflow-x: auto;white-space: nowrap;">
				<view v-for="(item,index) in menuList" :key="index">
					<view @click="ind2 = index" :class="ind2 == index ? 'selMenu' : 'unMenu'"
						style="font-size: 32rpx;margin-right: 40rpx;padding: 20rpx 40rpx;border-radius: 10rpx;">
						{{item.title}}
					</view>
				</view>
			</view>
			<view style="height: 40rpx;"></view>
			<view style="display: flex;width: 90%;flex-direction: column;">
				<view :class="ind == 0 ? 'buy' : 'unBuy'"
					style="width: 99%;display: flex;border-radius: 20rpx;flex-direction: column; flex-shrink: 0;margin-bottom: 20rpx;justify-content: center;align-items: center;">
					<view style="height: 20rpx;"></view>
					<view style="width: 90%;display: flex;align-items: center;flex-direction: column;">
						<view style="font-size: 35rpx;font-weight: bold;width: 90%;text-align: center;">权益描述
						</view>
						<view style="margin: 10rpx 0;width: 100%;">
							<!-- <rich-text :nodes="item.remarks" style="font-size: 30rpx;font-weight: bold;"></rich-text> -->
							<text style="font-size: 30rpx;font-weight: bold;">1.AI全开放
							1.AI全开放
							1.AI全开放
							1.AI全开放
							1.AI全开放
							1.AI全开放
							1.AI全开放</text>
						</view>

						<view style="width: 100%;display: flex;justify-content: space-between;">
							<view
								style="font-size: 30rpx;text-decoration: line-through;text-decoration-color:#FE5D35;font-weight: bold;">
								{{$t('vip.5')}}：<span style="font-size: 28rpx;margin-right: 5rpx;">98¥</span>
							</view>
							<view style="display: flex;font-size: 30rpx;margin-left: 20rpx;">
								2{{$t('aiKeepPet.2')}}
							</view>
						</view>
					</view>
					<view style="height: 20rpx;"></view>
				</view>
			</view>
		</view>


		<view style="height: 260rpx;"></view>
		<view
			style="display: flex;width: 100%;flex-direction: column;align-items: center;margin-top: 60rpx;position: fixed;z-index: 9;bottom: 0;background-color: #333333;">
			<view style="height: 20rpx;"></view>
			<view style="width: 90%;display: flex;flex-direction: column;">
				<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
					<view style="display: flex;flex-direction: column;">
						<view style="font-size: 50rpx;font-weight: bold;color: #EDC983;">
							<span style="font-size: 28rpx;margin-right: 5rpx;">¥</span>
							68
						</view>
					</view>
					<view v-if="true" @click="toggle('bottom')" style="width: 60%;">
						<button size="mini" 
							style="width: 100%;display: flex;flex-direction: column;align-content: center;justify-content: center;text-align: center;border-radius: 60rpx;font-weight: bold;color: #fff;font-size: 30rpx;white-space: nowrap;background-color: #EDC983;"
							:loading="loading" :disabled="disabled">{{$t('shop.22')}}</button>
					</view>
					<view v-else class="puBut4"
						style="width: 50%;display: flex;flex-direction: column;align-content: center;justify-content: center;text-align: center;border-radius: 60rpx;padding: 20rpx 0;font-weight: bold;">
						<view style="font-size: 30rpx;">{{$t('vip.10')}}</view>
					</view>
				</view>

				<view style="font-size: 20rpx;color: #878787;width: 100%;text-align: right;margin-top: 15rpx;">
					{{$t('vip.3')}}《<span style="color: #745AFC;">{{$t('vip.6')}}</span>》
				</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>

		<!-- 选择支付弹窗 -->
		<view>
			<uni-popup ref="popup">
				<view
					style="width: 100%;display: flex;flex-direction: column;align-items: center;background-color: #ffffff;border-top-right-radius: 20rpx;border-top-left-radius: 20rpx;">
					<view style="height: 40rpx;"></view>

					<view style="width: 90%;display: flex;justify-content: space-between;">
						<view style="width: 60rpx;"></view>
						<view style="font-weight: bold;font-size: 32rpx;">{{$t('vip.4')}}</view>
						<view @click="close" style="width: 60rpx;">
							<uni-icons type="closeempty" size="22"></uni-icons>
						</view>
					</view>

					<view style="height: 40rpx;"></view>
					<view style="display: flex;width: 90%;overflow-x: auto;">
						<view @click="close" v-for="(item,index) in payList" :key="index"
							style="display: flex;flex-direction: column;align-items: center;margin-right: 40rpx;">
							<view class="debg" :style="{backgroundImage:'url('+ item.url +')'}"
								style="width: 90rpx;height: 90rpx;border-radius: 50%;"></view>
							<view style="height: 20rpx;"></view>
							<view style="font-size: 28rpx;font-weight: bold;">{{item.ladel}}</view>
						</view>
					</view>
					<view style="height: 40rpx;"></view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				expTime: '',
				ind2: 0,
				title: '',
				menuList: [{
						id: 0,
						title: '普通会员'
					},
					{
						id: 1,
						title: '超级会员'
					}
				],
				loading: false,
				disabled: true,
				userInfo: '',
				orderId: '',
				productId: "",
				productList: [],
				from: {
					tcType: '',
					price: 0,
					cusprice: ''
				},
				platform: '',
				userInfo: '',
				country: '',
				ind: 0,
				txUrl: '../../static/logo.png',
				imageList: [{
						url: '../../static/images/vip1.png',
						ladel: this.$t('aiAnswer.1')
					},
					{
						url: '../../static/images/vip2.png',
						ladel: this.$t('aiAnswer.2')
					},
					{
						url: '../../static/images/vip3.png',
						ladel: this.$t('aiKeepPet.25')
					},
					{
						url: '../../static/images/vip4.png',
						ladel: this.$t('vip.9')
					}
				],
				priceList: [],
				payList: [{
						id: 0,
						url: '../../static/images/weixipay.png',
						ladel: this.$t('shop.49')
					},
					{
						id: 1,
						url: '../../static/images/zfbPay.png',
						ladel: this.$t('common.125')
					}
				]
			}
		},
		onLoad() {

		},
		mounted() {

		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toggle(type) {
				this.$refs.popup.open(type)
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	page {
		//background: linear-gradient(to bottom, #1B1942, #0F0F12,);
		background: #1D1A16
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		min-height: 100vh;

		//background: linear-gradient(to bottom, #DFD7F9 0px, #f2f0f9 398rpx, #F5F6F8 100%)
		.debg {
			background-position: center;
			background-size: 100%;
			background-repeat: no-repeat;
		}


		.unBuy {
			border: 1px solid #464646;
			color: #fff;
		}

		.buy {
			color: #FED589;
			font-weight: bold;
			border: 1px solid #FED589;
		}

		.unBuy2 {
			color: #fff;
		}

		.buy2 {
			color: #FED589;
		}
	}

	uni-radio .uni-radio-input {
		background-color: #B3B2B2;
	}

	.unMenu {
		border: 1px solid #464646;
		color: #fff;
	}

	.selMenu {
		color: #FED589;
		font-weight: bold;
		border: 1px solid #FED589;
	}
</style>